<template>
  <section
    class="content-sidebar w-72 z-[9] mobile:hidden flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block relative transition-all duration-200"
  >
    <div class="ml-6 mb-6">
      <div
        v-for="(item, index) in baseModule"
        :key="index"
        class="cursor-pointer"
      >
        <div
          :class="[
            'flex',
            'items-center',
            'py-2.5',
            { 'router-link-active': item.active }
          ]"
          @click="goToUrl(item, index)"
        >
          <span class="icon-active mr-2.5">
            <SvgIcon :name="item.svgName" />
          </span>
          <b class="text-active font-bold text-sm">
            {{ i18nStore.translate(item.name) }}
          </b>
        </div>
      </div>
    </div>
    <div class="absolute bottom-10 left-0 w-full px-4">
      <div v-if="route.path === '/myFiles'">
        <div
          class="flex items-center bg-[#00e1d9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
        >
          <SvgIcon
            name="ggll"
            class="flex-1"
            svgClass="w-[18px] h-[18px]"
          ></SvgIcon>
          <div class="flex-[3_3_0%]">
            <p>
              {{
                i18nStore.translate('download_points') +
                ':' +
                userInfo.userInfo.points +
                i18nStore.translate('count')
              }}
            </p>
          </div>
          <div class="flex-1">
            <myButton @click="showPayPopup({ type: '4' })">
              {{ i18nStore.translate('buy') }}
            </myButton>
          </div>
        </div>
        <div
          class="flex items-center bg-[#00e0a9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
        >
          <SvgIcon name="mf" class="flex-1"></SvgIcon>
          <p class="flex-[3_3_0%]">
            {{
              i18nStore.translate('remaining_traffic') +
              ':' +
              formatSize(userInfo.userInfo.netflow_now)
            }}
          </p>
          <myButton @click="showPayPopup({ type: '3' })" class="flex-1">
            {{ i18nStore.translate('buy') }}
          </myButton>
        </div>
        <div class="w-full my-2">
          <ProgressBar
            :value="
              ((userInfo.userInfo.file_space -
                userInfo.userInfo.file_space_now) /
                userInfo.userInfo.file_space) *
              100
            "
            style="height: 15px"
            :show-value="false"
          />
        </div>
        <div class="flex justify-between text-sm font-bold items-center">
          <p>
            {{ i18nStore.translate('basic_space') }}:{{
              userInfo.userInfo.file_space_user
            }}/{{ userInfo.userInfo.file_space_text }}
          </p>
          <myButton
            class="px-2 py-2 bg-stone-300 rounded-lg cursor-pointer"
            @click="showPayPopup({ type: '2' })"
            >{{ i18nStore.translate('kuorong') }}</myButton
          >
        </div>
      </div>
      <div
        v-if="route.path === '/mySmallfiles'"
        class="flex items-center bg-[#00e0a9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
      >
        <SvgIcon name="lljk" class="flex-1"></SvgIcon>
        <p class="flex-[3_3_0%]">
          {{
            userInfo.userInfo.file_size_text +
            i18nStore.translate('Free_file_transfer_within')
          }}
        </p>
        <p @click="showPayPopup({ type: '1' })" class="flex-1">
          <myButton>
            {{ i18nStore.translate('upgrade') }}
          </myButton>
        </p>
      </div>
    </div>
  </section>
  <!-- mobile -->
  <section
    class="content-sidebar z-[9] pc:hidden w-full flex-none select-none bg-light-background dark:bg-dark-background xl:w-56 relative transition-all duration-200 origin-top overflow-y-hidden"
    :class="flagStore.isMobileContentSidebarOpen ? 'h-[38px]' : 'h-0'"
  >
    <div class="flex w-full justify-around">
      <div
        v-for="(item, index) in baseModule"
        :key="index"
        class="cursor-pointer"
      >
        <div
          :class="[
            'flex',
            'items-center',
            'py-2.5',
            { 'router-link-active': item.active }
          ]"
          @click="goToUrl(item, index)"
        >
          <span class="icon-active mr-2.5">
            <SvgIcon :name="item.svgName" />
          </span>
          <b class="text-active text-xs font-bold">
            {{ i18nStore.translate(item.name) }}
          </b>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useI18nStore, useFlagStore, useUserInfoStore } from '@/stores';
const i18nStore = useI18nStore();
const flagStore = useFlagStore();
const router = useRouter();
const route = useRoute();

const userInfo = useUserInfoStore();

const baseModule = ref([]);

watchEffect(() => {
  const path = route.path;
  baseModule.value = [
    {
      name: 'my_Smallfiles',
      svgName: 'weibiaoti',
      link: '/mySmallfiles',
      active: /^\/mySmallfiles/.test(path)
    },
    {
      name: 'my_Bigfiles',
      svgName: 'wenjianjia',
      link: '/myFiles',
      active: /^\/myFiles/.test(path)
    },
    {
      name: 'public_files',
      svgName: 'share',
      link: '/mySharedItems',
      active: /^\/mySharedItems/.test(path)
    },
    {
      name: 'garbage',
      svgName: 'rubbish',
      link: '/trash',
      active: /^\/trash/.test(path)
    }
  ];
});
const goToUrl = ({ link }, index) => {
  router.push({ path: link });
};

function formatSize(bytes) {
  // 定义1GB的字节数
  const oneGB = 1024 ** 3;
  // 定义1MB的字节数
  const oneMB = 1024 ** 2;

  // 如果字节数大于或等于1GB
  if (bytes >= oneGB) {
    return (bytes / oneGB).toFixed(2) + ' GB';
  } else {
    return (bytes / oneMB).toFixed(2) + ' MB';
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
